<template>
    <ph-flex class="ph-time-panel ph-dt-panel" dir="col">
        <div class="ph-text">
            <div>{{lang.hour}}</div>
            <div>{{lang.min}}</div>
            <div>{{lang.sec}}</div>
        </div>
        <div class="ph-time-columns">
            <div class="ph-time-scroll" v-siv="hour" ref="ehour">
                <ph-button type="transparent" 
                    :disabled="isHDis(h)" 
                    :active="!(isHDis(h))&&hour==h" 
                    :data-id="h"
                    v-for="(i,h) in hours" :key="h" @click="$emit('hour-change',h)">{{h}}</ph-button>
            </div>
            <div class="ph-time-scroll" v-siv="minute" ref="eminute">
                <ph-button type="transparent" 
                    :disabled="isMDis(m)"
                    :data-id="m"
                    :active="!isMDis(m)&&minute==m" v-for="(i,m) in minutes" 
                    :key="m" @click="$emit('minute-change',m)">{{m}}</ph-button>
            </div>
            <div class="ph-time-scroll" v-siv="second" ref="esecond">
                <ph-button type="transparent" 
                    :disabled="isSDis(s)" 
                    :data-id="s"
                    :active="!isSDis(s)&&second==s" 
                    v-for="(i,s) in seconds" :key="s" @click="$emit('second-change',s)">{{s}}</ph-button>
            </div>
        </div>
    </ph-flex>
</template>
<script lang="ts">
import { defineComponent, inject, PropType, Ref, ref } from 'vue'
import {PhFlex,PhButton} from '../base'
import { date2number } from '../../shared/datetime'
export default defineComponent({
    components:{
        PhFlex,PhButton
    },
    directives:{
        siv:{
            mounted(el:HTMLElement){
                setTimeout(()=>{
                    const active = el.querySelector(".ph-action-active") as HTMLElement
                    if(!active)return
                    const id = parseInt(active?.dataset.id as string)
                    el.scrollTo(0,id*active.offsetHeight)
                })
            },
            updated(el:HTMLElement,binding:any){
                if(!binding.value)return
                setTimeout(()=>{
                    const active = el.querySelector(".ph-action-active") as HTMLElement
                    if(!active)return
                    const 
                        poh = el.offsetHeight,
                        pst = el.scrollTop,
                        aoh = active.offsetHeight,
                        aot = active.offsetTop;
                    if(aot>=pst&&aot<=poh+pst-aoh)return
                    const id = parseInt(active?.dataset.id as string)
                    el.scrollTo(0,id*active.offsetHeight)
                })
            }
        }
    },
    props:{
        lang:{type:Object as PropType<Record<string,unknown>>},
        hour:{type:Number,default:0},
        minute:{type:Number,default:0},
        second:{type:Number,default:0}
    },
    setup(props) {
        const ehour = ref(null)
        const eminute = ref(null)
        const esecond = ref(null)
        const hours = new Array(24).fill(null)
        const minutes = new Array(60).fill(null)
        const seconds = new Array(60).fill(null)
        
        const start = inject("start") as Ref<Record<string,number>>
        const end = inject("end") as Ref<Record<string,number>>
        const dateobj =inject("dateobj") as Ref<Record<string,number>>

        const isDisabled = (date:number,s:number,e:number)=>{
            if(s===e)return false
            if(s&&e)
                return date<s||date>e
            if(s)
                return date<s
            if(e)
                return date>e
            return false
        }
        const dateSlice = (i:number,obj:Record<string,number>)=>{
            return ["yyyy","MM","dd","hh","mm","ss"].slice(0,i).map(k=>obj[k])
        }
        const isSDis = (sec:number)=>{
            const s = start.value?date2number(dateSlice(6,start.value)):0
            const e = end.value?date2number(dateSlice(6,end.value)):0
            const date = date2number([...dateSlice(5,dateobj.value),sec])
            return isDisabled(date,s,e)
        }
        const isMDis = (m:number)=>{
            const s = start.value?date2number(dateSlice(5,start.value)):0
            const e = end.value?date2number(dateSlice(5,end.value)):0
            const date = date2number([...dateSlice(4,dateobj.value),m])
            return isDisabled(date,s,e)
        }
        const isHDis = (h:number)=>{
            const s = start.value?date2number(dateSlice(4,start.value)):0
            const e = end.value?date2number(dateSlice(4,end.value)):0
            const date = date2number([...dateSlice(3,dateobj.value),h])
            return isDisabled(date,s,e)
        }
        
        return {
            ehour,
            eminute,
            esecond,
            hours,
            minutes,
            seconds,
            isHDis,isMDis,isSDis
            }
    },
})
</script>
<style lang="scss" scoped>
.ph-time-panel{
    justify-content: center;
    .ph-time-columns{
        display: flex;
        justify-content: center;
        .ph-time-scroll{
            width: 33%;
            height: calc(var(--phx) * 14);
            overflow-y: auto;
            position: relative;
            -webkit-overflow-scrolling:touch;
        }
    }
    .ph-action{
        width: 100%;
        &:hover{
            background-color: var(--ph-dt-cell-hover);
        }
        &:disabled{
            opacity: .5;
        }
    }
    .ph-text{
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        width: 100%;
        div{
            text-align: center;
            font-weight: bold;
            padding: 7px 0;
            width: 33%;
        }
    }
}
</style>
